import React, { useEffect, useState } from "react";
import {
  Table,
  Switch,
  Space,
  Button,
  Input,
  message,
  Pagination,
  Modal,
  Form,
  Select,
  Checkbox,
  Row,
  Col,
  Popconfirm,
} from "antd";
import http from "../../utils";
const Index = () => {
  const [data, setData] = useState([]);
  // const [pageIndex, setpageIndex] = useState(1);
  let [totals, settotals] = useState(0);
  const [pageSize, setpageSize] = useState(10);
  const [selectkeys, setSelectkeys] = useState([]);
  const [flag, setflag] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();

  // const dataSource = [
  //   {
  //     key: "1",
  //     id: "1",
  //     name: "胡彦斌",
  //     age: 32,
  //     tel: "13191184768",
  //     address: "西湖区湖底公园1号",
  //     state: true,
  //     time: "2024/6/29 10:41:47",
  //   },
  //   {
  //     id: "2",
  //     key: "2",
  //     name: "胡彦祖",
  //     age: 42,
  //     tel: "13191184768",
  //     address: "西湖区湖底公园1号",
  //     state: false,
  //     time: "2024/6/29 10:41:47",
  //   },
  // ];

  const columns = [
    {
      title: (
        <div>
          <Space>
            ID
            <Button size="small" type="primary" danger>
              批量删除
            </Button>
          </Space>
        </div>
      ),
      dataIndex: "id",
      key: "id",
      align: "center",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      align: "center",
    },
    {
      title: "联系方式",
      dataIndex: "tel",
      key: "tel",
      align: "center",
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address",
      align: "center",
    },
    {
      title: "注册时间",
      dataIndex: "time",
      key: "time",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "state",
      key: "state",
      align: "center",
      render: (_, record) => {
        // console.log(record);
        return <Switch checked={record.state} />;
      },
    },

    {
      title: "操作",
      dataIndex: "id",
      key: "id",
      align: "center",
      render: (id, record) => {
        return (
          <Space>
            <Button
              type="primary"
              size="small"
              ghost
              onClick={() => handelEdit(record)}
            >
              编辑
            </Button>
            <Popconfirm
              title="Delete the task"
              description="Are you sure to delete this task?"
              onConfirm={() => handelDel(id)}
              okText="Yes"
              cancelText="No"
            >
              <Button type="primary" size="small" danger ghost>
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  /*******************获取数据************************/
  const getList = async (page) => {
    await http
      .get("/list", { params: { pageIndex: page, pageSize } })
      .then((res) => {
        // console.log(res.data);
        const { code, list, total } = res.data;
        if (code) {
          // message.success("数据获取成功");
          setData(list);
          settotals(total);
        } else {
          message.error("数据获取失败");
        }
      });
  };
  useEffect(() => {
    getList(1);
  }, []);
  /*******************添加、编辑弹框************************/
  const hnadelAdd = () => {
    setflag(true);
    setIsModalOpen(true);
  };
  const handelEdit = (record) => {
    // 点击行数据
    if (record.state == true) {
      record.state = "在职";
    } else if (record.state == false) {
      record.state = "离职";
    }
    // console.log(record);
    form.setFieldsValue(record);
    setflag(false);
    setIsModalOpen(true);
  };
  // 点击确定判断flag状态
  const handleOk = () => {
    if (flag) {
      // 获取表单全部信息
      // console.log(form.getFieldsValue());
      const formdata = {
        ...form.getFieldsValue(),
        key: new Date().getTime().toString(),
        id: new Date().getTime().toString(),
      };

      http.post("/handelAdd", formdata).then((res) => {
        const { code, msg } = res.data;
        if (code === 200) {
          message.success(msg);
          getList();
        } else {
          message.error(msg);
        }
      });
    } else {
      const formdata = form.getFieldsValue();
      http.post("/handelEdit", formdata).then((res) => {
        const { code, msg } = res.data;
        if (code === 200) {
          message.success(msg);
          getList();
        } else {
          message.error(msg);
        }
      });
    }

    setIsModalOpen(false);
  };

  /***************删除****************/
  const handelDel = (id) => {
    // console.log(id);
    http.get("/handelDel", { params: { id } }).then((res) => {
      // console.log(res);
      const { code, msg } = res.data;
      if (code) {
        message.success(msg);
        getList();
      }
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalOpen(false);
  };

  /********************* 分页切换*************************/
  const pageChange = (page) => {
    // console.log(page);
    getList(page);
  };
  return (
    <div style={{ padding: "10px" }}>
      <Space style={{ margin: "10px 0" }}>
        <Button type="primary" onClick={hnadelAdd}>
          添加
        </Button>
        <Input.Search
          placeholder="请输入搜索内容"
          onSearch={1}
          style={{ width: 200 }}
        />
      </Space>
      {/* **********************表格*********************** */}
      <Table
        dataSource={data}
        columns={columns}
        rowSelection={{
          onChange: (selectedRowKeys) => {
            console.log(selectedRowKeys);
            setSelectkeys(selectedRowKeys);
            console.log(selectkeys);
          },
        }}
        pagination={false}
      />
      {/* **********************分页*********************** */}
      <Pagination
        total={totals}
        style={{ display: "flex", justifyContent: "center", marginTop: "20px" }}
        showQuickJumper
        // pageSize={10}
        // current={1}
        onChange={pageChange}
      />
      {/* **********************对话框*********************** */}
      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {/* **********************form表单*********************** */}
        <Form form={form} labelCol={{ span: 4 }}>
          <Form.Item label="ID" name="id">
            <Input disabled />
          </Form.Item>
          <Form.Item
            label="用户名"
            name="name"
            required={[
              {
                require: true,
                message: "请输入您的用户名",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            required={[
              {
                require: true,
                message: "请输入您的年龄",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="tel"
            required={[
              {
                require: true,
                message: "请输入您的手机号",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="所在地"
            name="address"
            required={[
              {
                require: true,
                message: "请输入您的城市",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="状态"
            name="state"
            required={[
              {
                require: true,
                message: "请选择您的状态",
              },
            ]}
          >
            <Select>
              <Select.Option value="在职">在职</Select.Option>
              <Select.Option value="离职">离职</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="兴趣爱好" name="interest">
            <Checkbox.Group>
              <Row style={{ width: "200px" }}>
                <Col>
                  <Checkbox value="上班" style={{ marginBottom: "7px" }}>
                    上班
                  </Checkbox>
                </Col>
                <Col>
                  <Checkbox value="摸鱼">摸鱼</Checkbox>
                </Col>
                <Col>
                  <Checkbox value="打游戏">打游戏</Checkbox>
                </Col>
                <Col>
                  <Checkbox value="点瞌睡">点瞌睡</Checkbox>
                </Col>
                <Col>
                  <Checkbox value="划水">划水</Checkbox>
                </Col>
                <Col>
                  <Checkbox value="游泳">游泳</Checkbox>
                </Col>
              </Row>
            </Checkbox.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Index;
